<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap5/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <!-- 自带背景颜色 bg-primary 蓝色  bg-success 绿色  bg-info 青蓝色  bg-warning 黄色  bg-danger 红色-->
    <div class="container pt-5 my-5 border">
        <h1>第一个bootstrap5   容器、网格、文字排版、颜色</h1>
        <div class="row">
          <div class="col-md-6 bg-danger text-white">
            <div class="row  my-1 border">
              <div class="col-md-4 bg-primary">1</div>
              <div class="col-md">1.5</div>
            </div>
          </div>
          <div class="col bg-warning text-info">2</div>
          <div class="col bg-info text-light">3</div>
          <div class="col bg-success text-muted">4</div>
        </div>
        <p>这是一些文本</p>
        <h1>h1这是一些文本</h1>
        <h2>h2这是一些文本</h2>
        <h3>h3这是一些文本</h3>
        <h4>h4这是一些<mark>高亮文本</mark>文本</h4>
        <h5>h5这是一些<abbr title="this is a....">虚线带说明</abbr>文本</h5>
        <h6>h6这是一些文本</h6>
        <div class="display-1">display-1</div>
        <div class="display-2">display-2</div>
        <div class="display-3">display-3</div>
        <div class="display-4">display-4</div>
        <div class="display-5">display-5</div>
        <div class="display-6">display-6</div>
        <h1>主标题<small>----副标题</small></h1>
        <p>use code : <code>console.write("hellow world!")</code></p>
        <p class="text-center">快捷键<kbd>ctrl+c</kbd>复制</p>
    </div>
    <div class="container pt-5 my-5 bg-dark text-light">
      <h1>第一个bootstrap5</h1>
      <p>这是一些文本</p>
      <blockquote>
        <p>这是一段中华民族的奋进史，中国人民从站起来到富起来再到强起来。这是每一个中国人的骄傲，是可以标榜历史的丰功伟绩，我们要坚定不移的站在历史正确的一边，坚定不移的站在中国共产党的身边，以习近平新时代社会主义为引导，坚持四个全面，做到两个维护。。。。。。
        </p>
        <footer class="blockquote-footer">
        人民日报评论员文章---《崛起的大国》
        </footer>
    </blockquote>
  </div>
  <div class="container pt-5 my-5 bg-primary text-white">
    <h1>第一个bootstrap5</h1>
    <p>这是一些文本</p>
    <dl>
      <dt>配置单
        <dd>总价：500</dd>
      </dt>
      <dt>配置详情
        <dd>cpu：30</dd>
        <dd>Gpu：230</dd>
        <dd>主板：180</dd>
        <dd>硬盘：20</dd>
      </dt>
    </dl>
    <pre>
      今天 天气  挺好的
 太阳大大的
      云儿白白的
 </pre>
</div>
  </body>
</html>

<!-- container 和 container-fluid 的区别：
container 的行为复杂一些：
屏幕小于 768 时，容器宽度是满屏，与 container-fluid 效果一样
屏幕大于 768 小于 992 时，宽度设为 750
屏幕大于 992 小于 1200 时，宽度为 970
屏幕大于 1200，宽度为 1170
margin-left, margin-right 都为 auto，保持 container 容器居中。
container-fluid 的行为就简单：
margin:0   宽度：100% -->